<script setup lang="ts">
import { ref } from 'vue'
import JsonEditorVue from 'json-editor-vue3'
import { FolderOpened, Delete, Upload, Check, TakeawayBox } from '@element-plus/icons-vue'
const jsonData = ref({})
const editableTabsValue = ref('0')
const editableTabsValue2 = ref('0')
const active = ref(0)
const inputDisabled = ref(true)
const drawer = ref(false)
const editableTabs = ref()
const addTab = () => {
  drawer.value = true
  getConfigDate()
}
const tabClick = () => {
  editableTabsValue2.value = '0'
  active.value = 0
}
const submit = (a, b) => {
  console.log(JSON.stringify(a), JSON.stringify(b), 'submit')
  console.log(JSON.stringify({ ...a, ...b }))

  window.api.ping2(JSON.stringify({ ...a, ...b }))
}
const getConfigDate = async () => {
  window.api.getConfigDate((val) => {
    jsonData.value = val
    editableTabs.value = val
  })
}
getConfigDate()
const updataModel = (val) => {
  console.log(val, 'updataModel')
  jsonData.value = val
}
const saveBtn = () => {
  console.log(jsonData.value, 'jsonData')

  window.api.saveJson(JSON.stringify(jsonData.value), (res) => {
    console.log('保存成功', res)
    editableTabs.value = res
    drawer.value = false
  })
}
const cancle = () => {
  drawer.value = false
}
const funcaaa = () => {
  window.api.progressNotice((res) => {
    console.log(res)
    active.value = res
  })
}
funcaaa()
</script>

<template>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="85%">
    <json-editor-vue
      v-model="jsonData"
      style="width: 100%; height: 90%"
      language="chinese"
      @update:model-value="updataModel"
    />
    <div class="flex justify-end mt-2">
      <el-button type="default" @click="cancle()">取消</el-button>
      <el-button type="primary" @click="saveBtn()">确认</el-button>
    </div>
  </el-drawer>

  <div style="margin-bottom: 20px">
    <el-button size="default" type="primary" @click="addTab()">服务器配置</el-button>
  </div>
  <el-tabs
    v-model="editableTabsValue"
    tab-position="right"
    style="height: 390px"
    class="demo-tabs"
    @tab-click="tabClick()"
  >
    <el-tab-pane v-for="items in editableTabs" :key="items.title" :label="items.title">
      <el-tabs v-model="editableTabsValue2" tab-position="top" type="" class="demo-tabs">
        <el-tab-pane
          v-for="item in items.project"
          :key="item.title"
          :label="item.title"
          :name="item.name"
        >
          <el-button type="primary" @click="submit(items, item)">发布</el-button>
          <div class="mt-2">
            打包命令：
            <el-input
              v-model="item.packcommand"
              style="width: 340px"
              clearable
              :disabled="inputDisabled"
            />
          </div>
          <div class="mt-2">
            打包路径：
            <el-input
              v-model="item.packpath"
              style="width: 340px"
              clearable
              :disabled="inputDisabled"
            />
          </div>
          <div class="mt-2">
            上传路径：
            <el-input
              v-model="item.uploadpath"
              style="width: 340px"
              clearable
              :disabled="inputDisabled"
            />
          </div>
          <div class="mt-2">
            备份路径：
            <el-input
              v-model="item.backupsPath"
              style="width: 340px"
              clearable
              :disabled="inputDisabled"
            />
          </div>
          <div class="mt-2">
            远程路径：
            <el-input
              v-model="item.servePath"
              style="width: 340px"
              clearable
              :disabled="inputDisabled"
            />
          </div>
          <div class="w-3/4 mb-2 scale-75">
            <el-steps style="max-width: 600px" :active="active">
              <el-step title="项目打包" :icon="TakeawayBox" />
              <el-step title="本地备份" :icon="FolderOpened" />
              <el-step title="远程删除" :icon="Delete" />
              <el-step title="本地上传" :icon="Upload" />
              <el-step title="完成" :icon="Check" />
            </el-steps>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
  </el-tabs>
</template>
<style></style>
